<template>
    <div>
      <div style="width: 100%;height: 60px">
        <router-link :to="{path:'/questionType',}">
          <el-button type="primary" icon="el-icon-back" style="float: left">返回题型列表</el-button>
        </router-link>
      </div>
      <el-form :inline="true" label-position="left" :model="questionTypeItem" label-width="100px">
        <div>
          <el-form-item label="题型名字">
            <el-input v-model="questionTypeItem.questionTypeName" placeholder="题型名字" style="width: 250px"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-table :data="questionTypeModeList"
                    border
                    tooltip-effect="dark"
                    style="width:900px;margin: 0 auto;"
                    @select="handleSelectionChange">
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column label="模块名" width="500px">
              <template slot-scope="questionTypeModeList">{{questionTypeModeList.row.modeName}}</template>
            </el-table-column>
            <el-table-column label="模块类型" width="150px">
              <template slot-scope="questionTypeModeList">{{questionTypeModeList.row.modeType}}</template>
            </el-table-column>
            <el-table-column
              label="操作" width="200px">
              <template slot-scope="questionTypeModeList">
                <el-button size="mini" type="danger"@click="deleteMode(questionTypeModeList.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="height: 80px"><el-button type="success" @click="addModeDialog=true" style="margin: 20px auto">添加模块</el-button></div>
        <div>
          <el-form-item>
            <el-button type="success" @click="addQuestionType">新增</el-button>
            <el-button type="danger" @click="">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!--   弹出框   -->
      <el-dialog
        title="新增模块"
      :visible.sync="addModeDialog"
      width="400px"
      :before-close="handleClose">
      <el-form :inline="true" label-position="left" :model="questionTypeMode" label-width="100px">
        <el-form-item label="模块名字">
          <el-input v-model="questionTypeMode.modeName" placeholder="模块名字" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="模块类型">
          <el-select v-model="questionTypeMode.modeType" placeholder="请选择">
            <el-option
              v-for="item in modeTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addMode">新增</el-button>
          <el-button type="danger" @click="addModeDialog=false">取消</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>
    </div>
</template>

<script>
  import qs from 'qs'
    export default {

        name: "AddQuestionTypeInformation",
      data(){
          return{
            modeTypeOptions:[
              {
                name:"题干",
                value:"message"
              },
              {
                name:"问题及答案",
                value:"Q&A"
              },
              {
                name:"选项",
                value:"selection"
              }
            ],
            addModeDialog:false,
            questionTypeItem:{
              questionTypeName:''
            },
            questionType:{
              id:'',
              questionTypeName:''
            },
            questionTypeModeList:[],
            questionTypeMode:{}
          }
      },
      created(){

      },
      methods:{
        addMode(){
          let flag=false
          let mode=this.questionTypeMode;
          this.questionTypeModeList.some((item,i)=>{
            if(item.modeName==mode.modeName){
              flag=true
              return true
            }
          })
          if(!flag){
            if(mode.modeType=="Q&A"){
              mode.modeType="question"
              this.questionTypeModeList.push(mode)
              var answerMode={modeType:"answer",modeName:mode.modeName+"--答案"}
              this.questionTypeModeList.push(answerMode)
            }
            else {
              this.questionTypeModeList.push(mode)
            }
            this.addModeDialog=false;
            this.questionTypeMode={}
          }
          else {
            this.$message({
              message:"模块名不能相同",
              duration: 3000
            })
          }
        },
        deleteMode(mode){
          this.questionTypeModeList.some((item,i)=>{
            if(item.modeName==mode.modeName){
              this.questionTypeModeList.splice(i, 1)
              return true
            }
          })
        },
        addQuestionType(){
          this.questionTypeModeList.some((item,i)=>{
            item.sort=i
          })
          let item={
            questionTypeName:this.questionTypeItem.questionTypeName,
            modes:this.questionTypeModeList
          }
          this.$axios.post('/questionType/addQuestionType',JSON.stringify(item),{headers: {'Content-Type': 'application/json'}})
            .then(res=>{
              this.$router.push('/questionType');
              this.$message({
                message:res.data.msg,
                duration: 3000
              })
            })
            .catch(err=>{
              this.addDialog=false;
              this.$message({
                message:'获取数据错误',
                type: 'error',
                duration: 3000
              })
            })
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
      }
    }
</script>

<style scoped>

</style>
